<template>
  <el-autocomplete
      v-model="dutyInput"
      class="inline-input"
      :fetch-suggestions="queryDuties"
      placeholder="支持空格隔开的多关键词搜索,如50 yifulite"
      :trigger-on-focus="false"
      style="width: 300px"
  >
    <template #prefix>
      <el-image :src="getDutyIconUrl(dutyInput)" class="icon"/>
    </template>
    <template #default="{ item }">
      <Duty :value="item.value"/>
    </template>
  </el-autocomplete>
</template>

<script setup lang="ts">
import {computed} from "vue";
import {getDuties, getDutyIconUrl} from "@/data/service/dutyService";
import Duty from '@/views/components/Duty/index.vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const dutyInput = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const queryDuties = (queryString: string, cb: any) => {
  const results = queryString
      ? getDuties(queryString)
      : queryString
  // call callback function to return suggestions
  cb(results)
}
</script>

<style scoped>
.icon{
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>